<template>
  <div class="songs-content clearfix">
    <div class="fl song-list">
      <div class="wrap">
          <!-- 歌曲详情 -->
          <div class="wrap-con">
          <song-detail :songsDetail=songsDetail :comment=comment></song-detail>
          <!-- 歌单评论 -->
          <comment :comment=comment></comment>
          </div>
      </div>
    </div>
    <div class="fr right-list">
      <!-- 包含这首歌的歌单 -->
      <contain-playlist :simiPlaylist=simiPlaylist></contain-playlist>
      <!-- 相似歌曲 -->
      <similar-songs :simiSongs=simiSongs></similar-songs>
    </div>
  </div>
</template>

<script>
import SongDetail from "./songDetail.vue"
import SimilarSongs from "./similarSongs.vue"
import ContainPlaylist from "./containPlaylist.vue"
import Comment from '../comment/comment'
export default {
  name: "songsContent",
  props: [],
  data() {
    return {
      songsDetail: {},
      simiSongs: {},
      simiPlaylist: {},
      comment: {},
      lyric: {}
    }
  },
  mounted() {
    this.songId = this.$route.query.id;
    this.getSongDetal()
    this.getSimiSong()
    this.getSimiPlaylist()
    this.getMusicComment()
    this.getLyric()
  },
  methods: {
    async getSongDetal() {
      try {
        let param = {
          ids: this.songId
        }
        let res = await this.$api.getSongDetail(param)
        if (res.data.code == 200) {
          this.songsDetail = res.data
        }
        // console.log("getSongDetal: ", res)
      } catch(err) {
        console.log(err)
      }
    },
    async getSimiSong() {
      try {
        let param = {
          id: this.songId
        }
        let res = await this.$api.getSimiSong(param)
        if (res.data.code == 200) {
          this.simiSongs = res.data
        }
      } catch(err) {
        console.log(err)
      }
    },
    async getSimiPlaylist() { // 包含这首歌的歌单
      try {
        let param = {
          id: this.songId
        }
        let res = await this.$api.getSimiPlaylist(param)
        if (res.data.code == 200) {
          this.simiPlaylist = res.data.playlists
        }
      } catch(err) {
        console.log(err)
      }
    },
    async getMusicComment() {
      try {
        let param = {
          id: this.songId
        }
        let res = await this.$api.getMusicComment(param)
        // console.log("getMusicComment: ", res)
        if (res.data.code == 200) {
          this.comment = res.data
        }
      } catch(err) {
        console.log(err)
      }
    },
    async getLyric() {
      try {
        let param = {
          id: this.songId
        }
        let res = await this.$api.getLyric(param)
        if (res.data.code == 200) {
          this.lyric = res.data
        }
      } catch(err) {
        console.log(err)
      }
    },
  },
  components: {
    SongDetail,
    SimilarSongs,
    ContainPlaylist,
    Comment
  },
}
</script>

<style scoped lang="less">
  .songs-content {
    width: 1100px;
    height: auto;
    background-color: white;
    margin: 0 auto;
    .song-list {
      margin-right: -271px;
      width: 100%;
      height: auto;
      .wrap {
        margin-right: 270px;
        height: auto;
        .wrap-con {
          padding: 30px 30px 0 30px;
          height: calc(100% - 30px);
          border-right: 1px solid #e1e1e1;
        }
      }
    }
    .right-list {
      width: 210px;
      height: 100%;
      padding: 20px 30px 0 30px;
      border-left: 1px solid #e1e1e1;
    }
  }
</style>